<template>
  <div>
    <!-- 搜索组件 -->
    <search></search>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 左侧 -->
      <div class="left">
        <div 
        class="menu-item" 
        v-for="(item,index) in menuList" :key="index"
        :class="{active:index===currentIndex}"
        @click="handleTabChange(index)"
        >
        {{item.cat_name}}
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="brand-item" v-for="(item,index) in rightData" :key="index">
          <div class="brand-title">
            {{item.cat_name}}
          </div>
          <div class="brand-list">
            <div class="brand" v-for="(subItem,subIndex) in item.children" :key="subIndex">
              <navigator :url="'/pages/search_list/main?keyword='+subItem.cat_name">
                <img :src="'https://itjustfun.cn/' + subItem.cat_icon" mode="aspectFill">
                <p>{{subItem.cat_name}}</p>
              </navigator>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from '../../components/search'
import request from '../../utils/request.js'
export default {
  components: {
    search
  },
  data () {
    return {
      menuList: [],
      currentIndex:0,
      rightData:[]
    }
  },
  methods: {
    // 点击左侧菜单
    handleTabChange(index){
      // 菜单高亮显示
      this.currentIndex=index
      // 根据下标找到右侧对应的数据
      this.rightData=this.menuList[index].children
    }
  },
  mounted () {
    // 请求分类数据
    request('https://itjustfun.cn/api/public/v1/categories')
    .then(res=>{
      // console.log(res);
      const {data}=res.data
      this.menuList=data
      // 默认显示
      this.rightData=this.menuList[0].children
    })
  }
}
</script>

<style scoped lang="scss">
@import './style.scss';
</style>
